<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
        .box{
            width: 800px;
            height: 800px;
            position: relative;
            background-color: #000000;
            margin: auto;
        }
        .img{
            position: absolute;
            left:0;
            top:0;
            transform: rotateZ(0deg);
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<div id="app">
    <div class="box">
        <img src="1.jpg" alt="" class="img" v-ball>
        <img src="2.jpg" alt="" class="img" v-ball>
        <img src="3.jpg" alt="" class="img" v-ball>
        <img src="4.jpg" alt="" class="img" v-ball>
        <img src="5.jpg" alt="" class="img" v-ball>
        <img src="6.jpg" alt="" class="img" v-ball>
        <img src="7.jpg" alt="" class="img" v-ball>
        <img src="8.jpg" alt="" class="img" v-ball>
        <img src="9.jpg" alt="" class="img" v-ball>
        <img src="10.jpg" alt="" class="img" v-ball>
    </div>
</div>
<script>
    Vue.directive('ball',{//inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
        inserted:function(el){
            var i=0;
            el.onclick=function(e){
                i+=10;
               el.style.transform="rotateZ("+i+"deg)"
            };
            el.onmousedown=function(e){
                var l=e.clientX-el.offsetLeft;
                var t=e.clientY-el.offsetTop;
                document.onmousemove=function(e){
                    el.style.left=(e.clientX-l)+'px';
                    el.style.top=(e.clientY-t)+'px'
                };
                el.onmouseup=function(){
                    document.onmousemove=null;
                    el.onmouseup=null;
                }
            }
        }
    });
    var app=new Vue({
        el:'#app'
    })
</script>	
</body>
</html>